<template>
    <div class="jx">
        <!--  <mt-header fixed title="-热点精选-">
    
                </mt-header> -->
        <!-- 标题-->
        <div class="header">
            -<span class="s1">热点</span>
            <span class="s2">精选</span> -

        </div>
        <!-- 轮播图-->
        <div class="swipe">
            <mt-swipe :auto="auto" :show-indicators="false">
                <mt-swipe-item>
                 <img src="../img/jx_swp1.png" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
              <img src="../img/jx_swp1.png" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <!-- 文章内容-->
        <div class="ct ct1">
            <div class="left">
                <div @click="jump">咖啡教程 | 咖啡萃取知识  </div>
                <div @click="jump"> 制作浓郁咖啡的6个小技巧！</div>
                <span class="pinglun">评论</span><span class="pingnum">684</span>
            </div>
            <div class="right">
                <img src="../img/jx1.png" alt="">
            </div>
        </div>

        <div class=" ct ct2">

            <div>咖啡拉花的入门必练小白

            </div>
            <div>步骤详细+疑难解答帮你纠正错误手法</div>


            <div class="imgs">
                <img src="../img/jx2.png" alt="">
                <img src="../img/jx3.png" alt="">
                <img src="../img/jx4.png" alt="">
            </div>
            <span class="pinglun">评论</span><span class="pingnum">684</span>
        </div>


        <div class=" ct ct3">


            <div>决一新战，映美咖啡拉花机来势汹汹</div>


            <div class="imgs">
                <img src="../img/jx5.png" alt="">
                <img src="../img/jx6.png" alt="">
                <img src="../img/jx7.png" alt="">
            </div>
            <span class="pinglun">评论</span><span class="pingnum">684</span>
        </div>
        <div class="ct ct4">
            <div class="left">

                <div>欲善其事，先利其器：如何选择适合
                    你的拉花缸？</div>
                <span class="pinglun">评论</span><span class="pingnum">684</span>
            </div>
            <div class="right">
                <img src="../img/jx8.png" alt="">
            </div>
        </div>
        <div class="ct ct5">
            <div class="left">

                <div>决一新战，映美咖啡拉花机来势汹汹</div>
                <span class="pinglun">评论</span><span class="pingnum">684</span>
                </div>
                   <div class="right">
                <img src="../img/jx9.png" alt="">
            </div>
           
        
        </div>

    </div>

</template>

<script>
    export default {
        name: 'fxjx',
        data() {
            return {
                auto: 2000,
            }
        },
        methods:{
            jump(){
               this.$router.push('/three/fxwz');
            },
        }
    }
</script>

<style scoped="scoped" lang="less">
    .jx{
        width: 100%;
    }
    .header {
        background-color: #F0F0F0;
        line-height: 50px;
        height: 50px;
        font-size: 26px;
        width: 100%;
    }

    .s1 {
        color: #EE7773;
    }

    .s2 {
        color: #C6C6C6;
    }

    .swipe {
        width: 100%;
        height: 172px;

    }

    .ct {

        margin: 4px 10px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    .title {
        color: rgba(16, 16, 16, 100);
        font-size: 14px;

    }

    .pinglun,
    .pingnum {
        color: rgba(139, 139, 139, 100);
        font-size: 8px;
    }
    .imgs img{
        width: 30% ;
        height: auto;
    }
    .ct1,.ct4,.ct5,.ct2 .imgs,.ct3 .imgs{
        display: flex;
        justify-content: space-between;
    }

    
</style>
